<template>
  <view class="daily-details-container">
    <!-- 学校及日期信息 -->
    <view class="school-info">
      <view class="school-name-container">
        <text class="school-name">{{ schoolName }}</text>
        <navigator url="/pages/allreport/reading-situation" hover-class="none">
          <text class="read-info" @click="viewReadInfo">阅读情况</text>
        </navigator>
      </view>
      <view class="date-info">
        <text class="date-label">汇报日期</text>
        <text class="report-date">{{ reportDate }}</text>
      </view>
    </view>

    <view class="content-body">
      <!-- 主标题 -->
      <view class="content-title">
        {{ schoolName }}-{{ formatDate(reportDate) }}(周一)
      </view>

      <!-- 水表模块：仅折叠图片，备注和状态常驻 -->
      <view class="collapse-header1" @click="toggleCollapse1('waterMeter')">
        <image class="icon" src="/static/water-meter-diagram.svg" mode="aspectFit"></image>
        <text class="collapse-title">水表图片</text>
        <image class="arrow" mode="aspectFit" :style="{ transform: showWaterMeterImages ? 'rotate(180deg)' : 'rotate(0deg)' }" src="/static/arrow-down.svg"></image>
      </view>

      <!-- 折叠内容：仅图片 -->
      <view class="collapse-content" v-show="showWaterMeterImages">
        <view class="meter-images">
          <image class="meter-img" v-for="(img, index) in meterImages" :key="index" :src="img" mode="aspectFill"></image>
        </view>
      </view>

      <!-- 日报图片模块 -->
      <view class="collapse-item">
        <view class="collapse-header2">
          <view class="remark-label">水表备注</view>
          <view class="operation">{{ operationText }}</view>
        </view>
        <view class="collapse-header3" @click="toggleCollapse2('dailyReport')">
          <image class="icon" src="/static/water-meter-diagram.svg" mode="aspectFit"></image>
          <text class="collapse-title">日报图片</text>
          <image class="arrow" mode="aspectFit" :style="{ transform: showDailyReportContent ? 'rotate(180deg)' : 'rotate(0deg)' }" src="/static/arrow-down.svg"></image>
        </view>
        <view class="collapse-content" v-show="showDailyReportContent">
          <view class="meter-images">
            <image class="meter-img" v-for="(img, index) in meterImages" :key="index" :src="img" mode="aspectFill"></image>
          </view>
        </view>
      </view>

      <!-- 历史总用量 -->
      <view class="usage-info">
        <view class="usage-left">
          <text class="usage-label">{{ viewAll ? '历史总用量' : '当日总用量' }}</text>
          <text class="usage-date">{{ viewAll ? reportDate.slice(0, 0) : reportDate }}</text>
        </view>
        <view class="usage-center">
          <text class="usage-value">{{ viewAll ? ' ' : todayUsageData[0].value }}</text>
        </view>
        <view class="usage-right">
          <button class="view-all" @click="toggleView">
            <image :src="viewAll ? '/static/see-all.svg' : '/static/see-today.svg'" mode="widthFix" class="seeall"></image>
            <text class="see">{{ viewAll ? '仅看当天' : '查看所有' }}</text>
          </button>
        </view>
      </view>

      <!-- 柱状图容器 -->
      <view class="chart-container" v-show="viewAll">
        <view class="chart">
          <view v-for="(item, index) in usageData" :key="index" class="bar-wrapper">
            <!-- 柱状图本体 -->
            <view class="bar" :style="{ height: `${item.height}px` }"></view>
            <!-- 数值文本（置于柱状图下方，与设计图二一致） -->
            <text class="bar-value">{{ item.value }}</text>
            <!-- 日期文本（置于数值下方） -->
            <text class="bar-label">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <!-- 水表数据表格 -->
      <view class="table-container">
        <view class="table-header">
          <text class="table-th">序号</text>
          <text class="table-th">水表</text>
          <text class="table-th">抄表数据</text>
          <text class="table-th">操作</text>
        </view>

        <view class="table-body">
          <view class="table-tr" v-for="(item, index) in meterData" :key="index">
            <!-- 历史数据展开区域 -->
            <view class="history-container">
              <view class="history-table" v-show="isHistoryOpen[item.meterName]">
                <view class="history-header">
                  <text class="history-th">日期</text>
                  <text class="history-th">抄表数据</text>
                  <text class="history-th">用量</text>
                </view>
                <view class="history-item" v-for="(hist, histIndex) in historyData[item.meterName]" :key="histIndex">
                  <text class="history-td">{{ hist.date }}</text>
                  <text class="history-td">{{ hist.reading }}</text>
                  <text class="history-tdusage">{{ hist.usage }}</text>
                </view>
              </view>
            </view>

            <!-- 表格行内容 -->
            <view class="table-tr-content">
              <text class="table-td">{{ index + 1 }}</text>
              <text class="table-td">{{ item.meterName }}</text>
              <text class="table-td">{{ item.readingData }}</text>
              <view class="history-btn" @click="toggleCollapse3(item.meterName)">
                <image src="/static/blue-arrow-down.svg" mode="aspectFit" class="history-image" :style="{ transform: isHistoryOpen[item.meterName] ? 'rotate(180deg)' : 'rotate(0deg)' }"></image>
                <text class="see">历史</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="pagination">
        <image class="arrow arrow-left" src="/static/left.svg" mode="aspectFit"></image>
        <text class="page-info">{{ currentPage }}/{{ totalPages }}</text>
        <image class="arrow arrow-right" src="/static/right.svg" mode="aspectFit"></image>
      </view>

      <view class="end">
        <text>日报备注</text>
        <text>今日抄表记录并分析用水情况，继续观察</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 数据定义
const schoolName = ref('广西机电工程学校');
const reportDate = ref('2025-06-16');
const operationText = ref('继续观察');
const showWaterMeterImages = ref(false);
const showDailyReportContent = ref(false);
const viewAll = ref(true);
const showHistoryContent = ref(false);

// 历史用量数据
const usageData = ref([
  { value: '945', label: '6/10', height: 95 },
  { value: '950', label: '6/11', height: 96 },
  { value: '920', label: '6/12', height: 93 },
  { value: '966', label: '6/13', height: 98 },
  { value: '818', label: '6/14', height: 84 },
  { value: '816', label: '6/15', height: 83 },
]);

const isHistoryOpen = ref({
  "市政表1": false,
  "市政表2": false,
  "市政表3": false,
  "市政表4": false
});

// 当天用量数据
const todayUsageData = ref([
  { value: '817', label: '6/16', height: 83 }
]);

// 水表图片地址
const meterImages = ref([
  '/static/waterlabel1.svg',
  '/static/waterlabel2.svg',
  '/static/waterlabel3.svg',
  '/static/waterlabel4.svg'
]);

const meterData = ref([
  { meterName: "市政表1", readingData: "55241" },
  { meterName: "市政表2", readingData: "45972" },
  { meterName: "市政表3", readingData: "30081" },
  { meterName: "市政表4", readingData: "13947" }
]);

const historyData = ref({
  "市政表1": [
    { date: "2025-06-10", reading: "549882", usage: "457" },
    { date: "2025-06-11", reading: "550316", usage: "484" },
    { date: "2025-06-12", reading: "550748", usage: "432" },
    { date: "2025-06-13", reading: "551209", usage: "461" },
    { date: "2025-06-14", reading: "551627", usage: "658" },
    { date: "2025-06-15", reading: "552077", usage: "450" },
    { date: "2025-06-16", reading: "552491", usage: "414" }
  ],
  "市政表2": [
    { date: "2025-06-10", reading: "44267", usage: "299" },
    { date: "2025-06-11", reading: "44550", usage: "283" },
    { date: "2025-06-12", reading: "44833", usage: "283" },
    { date: "2025-06-13", reading: "45133", usage: "300" },
    { date: "2025-06-14", reading: "45407", usage: "274" },
    { date: "2025-06-15", reading: "45702", usage: "295" },
    { date: "2025-06-16", reading: "45972", usage: "270" }
  ],
  "市政表3": [
    { date: "2025-06-10", reading: "549882", usage: "457" },
    { date: "2025-06-11", reading: "623316", usage: "614" },
    { date: "2025-06-12", reading: "445748", usage: "432" },
    { date: "2025-06-13", reading: "551209", usage: "841" },
    { date: "2025-06-14", reading: "551627", usage: "418" },
    { date: "2025-06-15", reading: "325077", usage: "750" },
    { date: "2025-06-16", reading: "462191", usage: "554" }
  ],
  "市政表4": [
    { date: "2025-06-10", reading: "549882", usage: "457" },
    { date: "2025-06-11", reading: "450316", usage: "434" },
    { date: "2025-06-12", reading: "550748", usage: "632" },
    { date: "2025-06-13", reading: "651209", usage: "461" },
    { date: "2025-06-14", reading: "551627", usage: "358" },
    { date: "2025-06-15", reading: "642377", usage: "450" },
    { date: "2025-06-16", reading: "654151", usage: "354" }
  ]
});

const currentPage = ref(1);
const totalPages = ref(1);

// 页面加载逻辑
onLoad((options) => {
  if (options.schoolName) schoolName.value = decodeURIComponent(options.schoolName);
  if (options.reportDate) reportDate.value = options.reportDate;
});

// 切换折叠状态
const toggleCollapse1 = (type) => {
  if (type === "waterMeter") {
    showWaterMeterImages.value = !showWaterMeterImages.value;
  }
};

const toggleCollapse2 = (type) => {
  if (type === "dailyReport") {
    showDailyReportContent.value = !showDailyReportContent.value;
  }
};

const toggleCollapse3 = (meterName) => {
  isHistoryOpen.value[meterName] = !isHistoryOpen.value[meterName];
};

const formatDate = (dateStr) => dateStr.split(' ')[0];

const viewHistory = (item) => {
  uni.showToast({ title: `查看${item.meterName}历史数据功能待实现`, icon: "none" });
};

// 切换查看模式
const toggleView = () => {
  viewAll.value = !viewAll.value;
};
</script>

<style scoped>
.daily-details-container {
  padding: 15px;
  background-color: #f3f3f3;
  min-height: 100vh;
}

.school-info {
  margin-bottom: 15px;
  background-color: #fff;
  padding: 15px;
  border-radius: 16rpx;
}

.school-name-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.school-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.read-info {
  color: #007aff;
  font-size: 16px;
  font-weight: bold;
}

.date-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-label {
  color: #999;
  font-size: 16px;
  margin-right: 5px;
  font-weight: normal;
}

.report-date {
  font-size: 16px;
  color: #111;
  font-weight: bold;
}

.content-body {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 15px;
}

.content-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 40rpx;
  color: #333;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0f0f0;
}

.collapse-item {
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
  border-bottom: 1rpx solid #eee;
}

.collapse-header1, .collapse-header3 {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .collapse-header2 {
    display: block;
    padding: 10px 15px;
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
  
  .collapse-title {
    flex: 1;
    font-size: 14px;
    color: #666666;
    font-weight: bold;
  }
  
  .arrow {
    width: 16px;
    height: 16px;
    color: #999999;
    transition: transform 0.3s ease;
  }
  
  .remark-label {
    color: #999;
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .operation {
    font-size: 16px;
    font-weight: bold;
    color: #55aaff;
    margin-bottom: 30rpx;
  }
  
  .collapse-content {
    padding: 10px;
    background-color: #fff;
  }
  
  .meter-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .meter-img {
    width: 48%;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  
  .usage-info {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1rpx solid #F2F8FF;
  }
  
  .usage-left {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .usage-label {
    font-size: 16px;
    color: #000;
    padding-bottom: 0rpx;
    margin-bottom: 4px;
    font-weight: bold;
  }
  
  .usage-date {
    font-size: 14px;
    color: #666;
  }
  
  .usage-center {
    flex: 1;
    text-align: center;
  }
  
  .usage-value {
    font-size: 24px;
    font-weight: 500;
    color: #55aaff;
  }
  
  .usage-right {
    margin-left: auto;
  }
  
  .view-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 14px;
    color: #007AFF;
    background-color: #F2F8FF;
    border: 1px solid #007AFF;
    border-radius: 20px;
    line-height: 1.5;
  }
  
  .seeall {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
  
  .see {
    vertical-align: middle;
  }
  
  /* 优化后的图表样式 */
.chart-container {
  margin-top: 20px;
  width: 100%;
  /* 让容器宽度自适应父元素 */
  background-color: #fff;
  border-radius: 8px;
  /* 仅保留上下内边距，左右贴近屏幕 */
  padding: 16px 0; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 确保内边距不影响宽度计算 */
  box-sizing: border-box; 
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 给标题和按钮留出左右内边距，避免贴边 */
  padding: 0 16px; 
  margin-bottom: 16px;
}

.chart {
  display: flex;
  align-items: flex-end;
  height: 150px;
  /* 让柱形均匀分布，贴近屏幕两侧 */
  justify-content: space-around; 
  position: relative;
  /* 给图表内容留出左右内边距，避免柱形贴边 */
  padding: 0 10px; 
}

.bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 让柱形容器自动填充空间，同时限制最小宽度 */
  flex: 1; 
  min-width: 40px; 
  /* 控制柱形之间的间距 */
  margin: 0 5px; 
}

.bar {
  width: 20px; 
  background-color: #66b1ff;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
  border-top-right-radius: 30rpx;
  border-top-left-radius: 30rpx;
}

.bar-value {
  font-size: 12px;
  color: #333;
  margin-top: 6px;
  font-weight: bold;
}

.bar-label {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  white-space: nowrap;
}

/* 表格样式 */
.table-container {
margin-top: 15px;
border-radius: 10px;
border-bottom: 1rpx solid #f5f5f5;
background-color: #fff;
}

.table-header {
display: flex;
background-color: #f5f5f5;
border-radius: 10rpx;
}

.table-th {
flex: 1;
text-align: center;
padding: 10px;
font-weight: bold;
}

.table-body {
display: block;
}

.table-tr {
margin-top: 10px;
margin-bottom: 10px;
position: relative;
}

.table-tr-content {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #eee;
}

.table-td {
flex: 1;
text-align: center;
padding: 5px;
}

/* 历史数据样式 */
.history-container {
margin-bottom: 10px;
}

.history-table {
background-color: #ffffff;
border-radius: 8px;
}

.history-header {
display: flex;
background-color: #eee;
font-weight: bold;
margin-bottom: 4px;
}

.history-th {
flex: 1;
text-align: center;
padding: 8px;
color: #666;
}

.history-item {
display: flex;
margin-bottom: 2px;
}

.history-td {
flex: 1;
text-align: center;
padding: 4px;
font-weight: bold;
color: #666;
}

.history-tdusage {
background-color: #f3f3f3;
border-radius: 30rpx;
flex: 1;
text-align: center;
padding: 4px;
color: #00ff00;
font-weight: bolder;
}

.history-btn {
flex: 1;
text-align: center;
font-size: 14px;
color: #55aaff;
border-radius: 20px;
background-color: #dcf3ff;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
cursor: pointer;
}

.history-image {
width: 12px;
height: 12px;
margin-right: 5px;
vertical-align: middle;
}

.pagination {
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
padding: 8px 16px;
margin: 15px 0;
border-radius: 8px;
}

.page-info {
margin: 0 10px;
font-size: 16px;
color: #333333;
font-weight: normal;
}

.arrow {
width: 24px;
height: 24px;
margin: 0 4px;
opacity: 0.5;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.arrow-left {
margin-left: 18px;
}

.arrow-right {
margin-right: 18px;
}

.arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}

.end {
padding: 10px;
background-color: transparent;
}

.end text:first-child {
font-size: 14px;
color: #999;
margin-top: 18px;
margin-bottom: 18px;
display: block;
}

.end text:last-child {
font-size: 16px;
color: #4A90E2;
line-height: 1.5;
font-weight: bold;
}
</style>